﻿@page "/docs/components/input-mask"

<Seo Canonical="/docs/components/input-mask" Title="Blazorise InputMask system" Description="Learn to use and work with the Blazorise InputMask component, that helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ..." />

<DocsPageTitle Path="Components/Input Mask">
    Blazorise InputMask component
</DocsPageTitle>

<DocsPageLead>
    Input mask allows the user to input a value in a specific format while typing.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>InputMask</Code> helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Span Padding="Padding.Is2.OnX"><Code>9</Code></Span>: numeric
    </UnorderedListItem>
    <UnorderedListItem>
        <Span Padding="Padding.Is2.OnX"><Code>a</Code></Span>: alphabetical
    </UnorderedListItem>
    <UnorderedListItem>
        <Span Padding="Padding.Is2.OnX"><Code>*</Code></Span>: alphanumeric
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic Mask">
        To start you only need to define the <Code>Mask</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicInputMaskExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicInputMaskExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With Alias">
        Instead of masking an input element, it is also possible to use the inputmask for formatting given values.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <AliasInputMaskExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="AliasInputMaskExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Other examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="With Placeholder">
        You can control the placeholder that will be used for the mask. The <Code>Placeholder</Code> will be used when the mask is not defined. And the <Code>MaskPlaceholder</Code> will be used when the mask is defined for extra information to the user about the valid input format.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <InputMaskPlaceholderExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="InputMaskPlaceholderExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="Value" Type="string" Default="null">
        Input value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ValueChanged" Type="@("EventCallback<string>")">
        Occurs after the value has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Mask" Type="string" Default="null">
        The mask to use for the input.
    </DocsAttributesItem>
    <DocsAttributesItem Name="MaskPlaceholder" Type="string" Default="null">
        The placeholder that will be used for the mask.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Plaintext" Type="bool" Default="false">
        Remove the default form field styling and preserve the correct margin and padding.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ReadOnly" Type="bool" Default="false">
        Prevents modification of the input’s value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Disabled" Type="bool" Default="false">
        Prevents user interactions and make it appear lighter.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Placeholder" Type="string" Default="null">
        Sets the placeholder for the empty text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pattern" Type="string" Default="null">
        Specifies a regular expression that the input element’s value is checked against on form validation.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Color" Type="Color" Default="Default">
        Component visual or contextual style variants.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Size" Type="Size" Default="Default">
        Component size variations.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Autofocus" Type="bool" Default="false">
        Set’s the focus to the component after the rendering is done.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowMaskOnFocus" Type="bool" Default="true">
        Shows the mask when the input gets focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ShowMaskOnHover" Type="bool" Default="true">
        Shows the mask when hovering the mouse.
    </DocsAttributesItem>
    <DocsAttributesItem Name="NumericInput" Type="bool" Default="false">
        Numeric input direction. Keeps the caret at the end.
    </DocsAttributesItem>
    <DocsAttributesItem Name="RightAlign" Type="bool" Default="false">
        Align the input to the right. By setting the rightAlign you can specify to right-align an inputmask.
        This is only applied in combination op the numericInput option or the dir-attribute. The default is true.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DecimalSeparator" Type="string">
        Define the decimal separator (numeric mode only).
    </DocsAttributesItem>
    <DocsAttributesItem Name="GroupSeparator" Type="string">
        Define the group separator (numeric mode only).
    </DocsAttributesItem>
    <DocsAttributesItem Name="Nullable" Type="bool" Default="false">
        Return nothing when the user hasn't entered anything.
    </DocsAttributesItem>
    <DocsAttributesItem Name="AutoUnmask" Type="bool" Default="false">
        Automatically unmask the value when retrieved.
    </DocsAttributesItem>
    <DocsAttributesItem Name="PositionCaretOnClick" Type="InputMaskCaretPosition" Default="LastValidPosition">
        Defines the positioning of the caret on click.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ClearMaskOnLostFocus" Type="bool" Default="true">
        Remove the empty mask on blur or when not empty remove the optional trailing part.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ClearIncomplete" Type="bool" Default="false">
        Clear the incomplete input on blur.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Completed" Type="EventCallback<string>">
        Execute a function when the mask is completed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Incompleted" Type="EventCallback<string>">
        Execute a function when the mask is incomplete. Executes on blur.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Cleared" Type="EventCallback">
        Execute a function when the mask is cleared.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Alias" Type="string">
        With an alias, you can define a complex mask definition and call it by using an alias name.
        So this is mainly to simplify the use of your masks. Some aliases found in the extensions are email,
        currency, decimal, integer, date, DateTime, dd/mm/yyyy, etc.
    </DocsAttributesItem>
    <DocsAttributesItem Name="InputFormat" Type="string">
        Defines the input format when the <Code>Alias</Code> is used.
    </DocsAttributesItem>
    <DocsAttributesItem Name="OutputFormat" Type="string">
        Defines the output format of the <Code>Value</Code> when the <Code>Alias</Code> is used.
    </DocsAttributesItem>
</DocsAttributes>